<template>
  <div
    class="field-wrapper"
    :class="{ 'design-time-bottom-margin': !!this.designer }"
    :style="{ display: displayStyle, height: designHeight ? '100%': ''}"
  >
    <div class="static-content-item"
      v-if="!field.options.hidden || (designState === true)"
      :style="{display: displayStyle,}"
      :class="[selected ? 'selected' : '', customClass,designHeight ? 'heigthClass' : '' ]"
      @click.stop="selectField(field)">
      <slot></slot>
    </div>

    <template v-if="!!this.designer">
      <div class="widget-action" v-if="designer.selectedId === field.id">
        <i :title="i18nt('designer.hint.selectParentWidget')"
          @click.stop="selectParentWidget(field)">
          <VfIcon name="iv-icon-back" />
        </i>
        <i v-if="!!parentList && (parentList.length > 1)"
          :title="i18nt('designer.hint.moveUpWidget')"
          @click.stop="moveUpWidget(field)"><VfIcon name="iv-icon-move-up" /></i>
        <i v-if="!!parentList && (parentList.length > 1)"
          :title="i18nt('designer.hint.moveDownWidget')"
          @click.stop="moveDownWidget(field)"><VfIcon name="iv-icon-move-down" /></i>
        <i :title="i18nt('designer.hint.remove')"
          @click.stop="removeFieldWidget">
          <VfIcon name="iv-icon-delete" />
        </i>
      </div>

      <div class="widget-label opacity drag-handler"
        v-if="designer.selectedId === field.id">
        <i :title="i18nt('designer.hint.dragHandler')"><VfIcon name="iv-icon-drag" /></i>
        <i>{{i18n2t(`designer.widgetLabel.${field.type}`, `extension.widgetLabel.${field.type}`)}}</i>
        <i v-if="field.options.hidden === true"><VfIcon name="iv-icon-hide" /></i>
      </div>
    </template>
  </div>
</template>

<script>
import i18n from "@/utils/i18n"

export default {
  name: "static-content-wrapper",
  mixins: [i18n],
  components: {
  },
  props: {
    field: Object,
    designer: Object,
    parentList: Array,
    parentWidget: Object,
    indexOfParentList: Number,
    designHeight: {
      type: Boolean,
      default: false
    },

    designState: {
      type: Boolean,
      default: false
    },

    displayStyle: {
      type: String,
      default: 'block'
    },

    subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
      type: Number,
      default: -1
    },
    subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
      type: Number,
      default: -1
    },
    subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
      type: String,
      default: ''
    },
  },
  computed: {
    selected() {
      return !!this.designer && this.field.id === this.designer.selectedId
    },

    customClass() {
      return !!this.field.options.customClass ? this.field.options.customClass.join(' ') : ''
    },

  },
  methods: {

    selectField(field) {
      if (!!this.designer) {
        this.designer.setSelected(field)
        this.designer.emitEvent('field-selected', this.parentWidget)  //发送选中组件的父组件对象
      }
    },

    selectParentWidget() {
      if (this.parentWidget) {
        this.designer.setSelected(this.parentWidget)
      } else {
        this.designer.clearSelected()
      }
    },

    moveUpWidget() {
      this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
      this.designer.emitHistoryChange()
    },

    moveDownWidget() {
      this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
      this.designer.emitHistoryChange()
    },

    removeFieldWidget() {
      if (!!this.parentList) {
        const fieldRefName = this.designer.selectedWidgetName
        let nextSelected = null
        if (this.parentList.length === 1) {
          if (!!this.parentWidget) {
            nextSelected = this.parentWidget
          }
        } else if (this.parentList.length === (1 + this.indexOfParentList)) {
          nextSelected = this.parentList[this.indexOfParentList - 1]
        } else {
          nextSelected = this.parentList[this.indexOfParentList + 1]
        }

        this.$nextTick(() => {
          this.parentList.splice(this.indexOfParentList, 1)
          this.designer.setSelected(nextSelected)

          this.designer.formWidget.deleteWidgetRef(fieldRefName)  //删除组件ref！！！
          this.designer.emitHistoryChange()
        })
      }
    },

  }
}
</script>

<style lang="scss" scoped>
@import '@/components/form-designer/form-widget/styles/widget-action.scss';

.design-time-bottom-margin {
  margin-bottom: 5px;
}

.field-wrapper {
  position: relative;
}

.static-content-item {
  display: flex; /* 垂直居中 */
  min-height: 25px;
  align-items: center; /* 垂直居中 */

  :deep(.el-divider--horizontal) {
    margin: 15px;
  }
}

.el-form-item.selected,
.static-content-item.selected {
  outline: 2px solid $--color-primary;
}
.heigthClass {
  height: 100%;
}
</style>
